在上一部分中，我们对 PWA 的底层技术进行了全面介绍，本部分我们将通过实现一个简单的博客系统（见下图）来对上述各技术点进行综合运用，以便让大家更好地掌握 PWA。

本部分完整代码仓库为：github.com/nanjingboy/…，主要目录结构如下：

├── client
│   ├── db.js
│   ├── detail
│   │   ├── edit.png
│   │   ├── index.js
│   │   └── styles.css
│   ├── edit
│   │   ├── index.js
│   │   └── styles.css
│   ├── global
│   │   ├── index.css
│   │   └── index.js
│   ├── home
│   │   ├── index.js
│   │   ├── plus.png
│   │   └── styles.css
│   ├── index.ejs
│   ├── launcher-icon.png
│   ├── manifest.json
│   ├── network.js
│   └── sw.js
├── server
│   ├── db.js
│   ├── push.js
│   └── server.js
├── webpack
│   └── plugins
│       ├── SWFilePlugin.js
│       ├── ShellPlugin.js
│       └── index.js
├── webpack.config.js

• client：主要包含页面、Service Worker、应用配置（manifest.json）等前端业务逻辑。
• server：主要包含 Web Server、数据库操作、Web Push 等后端业务逻辑。
• webpack：Webpack plugin，用于生成 Shell 文件及预缓存列表。
• webpack.config.js：Webpack 配置文件。

所用技术：

• 前端：由于示例较为简单，该示例并未选用如 Vue、React 等第三方框架，而是使用原生 JavaScript + DOM API 来完成相关逻辑。
• 前端构建：由于 webpack 在前端构建中占有大量的份额，故此选择 webpack 作为构建工具。
• 服务端：Node.js + Koa。

通过本部分的学习，除了能够对 PWA 相关技术进行熟练运用外，大家还将会掌握以下知识点：

• 如何通过自定义 Webpack Plugin 实现动态预缓存列表的生成。
• 应用 Shell、导航预加载解决的问题及使用。
• 常见请求策略及缓存置换问题。
• Server Worker 的更新问题。

注：由于使用了 ES6 语法且未进行转义处理，故建议在最新的 Chrome 下运行客户端。